<template>
  <div class="app-container">


    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单信息</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form ref="orderInfo" label-width="100px" disabled>
            <el-form-item label="订单编号">
              <el-col :span="6" >
                <el-input v-model="orderInfo.orderNo" />
              </el-col>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-col :span="6" >
                <el-input v-model="orderInfo.orderStatus" />
              </el-col>
            </el-form-item>
            <el-row :gutter="55">
              <el-col :span="9" >
                <el-form-item label="购买数量">
                  <el-input v-model="orderInfo.totalNum" />
                </el-form-item>
              </el-col>
              <el-col :span="9" >
                <el-form-item label="总金额" >
                  <el-input v-model="orderInfo.totalAmount" placeholder="0.00">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="55">
              <el-col :span="9" >
                <el-form-item label="折扣金额">
                  <el-input v-model="orderInfo.discountAmount" placeholder="0.00">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" >
                <el-form-item label="优惠券金额" >
                  <el-input v-model="orderInfo.couponAmount" placeholder="0.00">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="55">
              <el-col :span="9" >
                <el-form-item label="运费">
                  <el-input v-model="orderInfo.freight" placeholder="0.00">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" >
                <el-form-item label="实付金额" >
                  <el-input v-model="orderInfo.payAmount" placeholder="0.00">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="55">
              <el-col :span="9" >
                <el-form-item label="收货人">
                  <el-input v-model="orderInfo.consignee" />
                </el-form-item>
              </el-col>
              <el-col :span="9" >
                <el-form-item label="联系方式" >
                  <el-input v-model="orderInfo.phone" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="收货地址">
              <el-col :span="18" >
                <el-input v-model="orderInfo.address" />
              </el-col>
            </el-form-item>
            <el-form-item label="买家留言">
              <el-col :span="18" >
                <el-input v-model="orderInfo.message" type="textarea" />
              </el-col>
            </el-form-item>
            <el-form-item label="订单备注">
              <el-col :span="18" >
                <el-input v-model="orderInfo.remark" type="textarea" />
              </el-col>
            </el-form-item>

            <div style="height: 50px">
            </div>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-timeline>
            <el-timeline-item
              v-for="(event, index) in orderEvents"
              :key="index"
              :timestamp="event.timestamp">
              {{event.content}}
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品列表</span>
      </div>
      <el-table :data="orderInfo.itemList">
        <el-table-column prop="itemId" label="id" />
        <el-table-column prop="skuId" label="skuId" />
        <el-table-column label="商品图片" align="center" prop="itemPic" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <img :src="scope.row.itemPic"  width="60" height="60" />
          </template>
        </el-table-column>
        <el-table-column prop="itemName" label="货号" />
        <el-table-column prop="itemSpec" label="规格" />
        <el-table-column prop="buyNum" label="购买数量" />
        <el-table-column prop="unitPrice" label="单价" />
        <el-table-column prop="totalPrice" label="总金额" />
        <el-table-column prop="payAmount" label="实付金额" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import { getOrder } from "@/api/order/order";

  export default {
    name: "OrderInfo",
    data() {
      return {
        // 遮罩层
        loading: true,
        orderInfo: {
          itemList: []
        },
        orderEvents: []
      };
    },
    created() {
      const orderNo = this.$route.query && this.$route.query.orderNo;
      if (orderNo) {
        this.getOrder(orderNo);
      }
    },
    methods: {
      getOrder(orderNo) {
        getOrder(orderNo).then(response => {
          this.orderInfo = response.data;
          this.orderEvents.push({
            content: '提交订单',
            timestamp: this.orderInfo.createTime
          })
          this.getOptions("order-status").then(response => {
            this.orderInfo.orderStatus = this.selectOptionValue(response.data.options, this.orderInfo.orderStatus);
          });
          if (this.orderInfo.payTime) {
            this.orderEvents.push({
              content: '支付成功',
              timestamp: this.orderInfo.payTime
            })
          }
          if (this.orderInfo.sendTime) {
            this.orderEvents.push({
              content: '支付成功',
              timestamp: this.orderInfo.sendTime
            })
          }
          if (this.orderInfo.confirmTime) {
            this.orderEvents.push({
              content: '确认收货',
              timestamp: this.orderInfo.confirmTime
            })
          }
          if (this.orderInfo.cancelTime) {
            this.orderEvents.push({
              content: '订单取消',
              timestamp: this.orderInfo.cancelTime
            })
          }
        });
      }
    }
  }
</script>

<style>
  .el-card {
    margin-bottom: 10px;
  }
</style>
